<template>
  <div>
    <el-table
        :data="tableData"
        :class="{tableTopLevel1: topLevel === 1, tableTopLevel2: topLevel === 2, tableTopLevel3: topLevel === 3, tableTopLevelDefault: topLevel === -1}"
        row-key="id"
        border
        max-height="510"
        @selection-change="handleSelectionChange"
        :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
      <el-table-column
          type="selection"
          width="55">
      </el-table-column>
      <el-table-column
          prop="orgName"
          label="组织名称"
          width="160">
      </el-table-column>
      <el-table-column
          prop="orgType"
          label="组织类型"
          :formatter="formatType"
          width="160">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          :formatter="formatStatus"
          width="160">
      </el-table-column>
      <el-table-column
          prop="leaderUserName"
          label="负责人姓名"
          width="160">
      </el-table-column>
      <el-table-column
          prop="leaderPhone"
          label="负责人联系电话"
          width="160">
      </el-table-column>
      <el-table-column
          label="操作">
        <template slot-scope="scope">
          <el-button v-if="addChildShow" type="primary" @click="addLowerOrg(scope.row.id, scope.row.orgName)" size="mini">新增子级</el-button>
          <el-button v-if="editShow" type="primary" @click="editSysOrg(scope.row.id)" size="mini">修改</el-button>
          <el-button v-if="delShow" type="primary" @click="deleteSysOrg(scope.row.id)" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <PageC :handleSizeChange="handleSizeChange" :handleCurrentChange="handleCurrentChange" :pageSize="pageSize" :total="total" :currentPage="currentPage"></PageC>
  </div>
</template>

<script>
  import PageC from "@/components/PageC";
  import {deleteSysOrgById, getSysOrgs} from "@/api/sysOrg";
  import {Message} from "element-ui";
  export default {
    name: "SysOrgTable",
    components: {PageC},
    props: {
      topLevel: {
        required: false,
        default: -1,
        type: Number
      },
      editShow: {
        required: true,
        default: false,
        type: Boolean
      },
      delShow: {
        required: true,
        default: false,
        type: Boolean
      },
      addChildShow: {
        required: true,
        default: false,
        type: Boolean
      },
    },
    computed: {
      tableData: {
        get() {
          return this.$store.state.org.tableData;
        },
        set(value) {
          this.$store.state.org.tableData = value;
        }
      },
      // 选中行id
      multipleSelection: {
        get() {
          return this.$store.state.org.multipleSelection;
        },
        set(value) {
          this.$store.state.org.multipleSelection = value;
        }
      },
      total: {
        get() {
          return this.$store.state.org.total;
        },
        set(value) {
          this.$store.state.org.total = value;
        }
      },
      pageSize: {
        get() {
          return this.$store.state.org.pageSize;
        },
        set(value) {
          this.$store.state.org.pageSize = value;
        }
      },
      currentPage: {
        get() {
          return this.$store.state.org.currentPage;
        },
        set(value) {
          this.$store.state.org.currentPage = value;
        }
      },
      parentId: {
        get() {
          return this.$store.state.org.sysOrgForm.parentId;
        },
        set(value) {
          this.$store.state.org.sysOrgForm.parentId = value;
        }
      },
      parentName: {
        get() {
          return this.$store.state.org.sysOrgForm.parentName;
        },
        set(value) {
          this.$store.state.org.sysOrgForm.parentName = value;
        }
      }
    },
    methods: {
      addLowerOrg(id, name) {
        this.parentId = id;
        this.parentName = name;
        let params = {
          dialogFormVisible: true,
          dialogTitle: "添加"
        }
        this.$store.commit("org/openDialogForm", params);
      },
      formatStatus(row) {
        return row.status === "0" ? "启用" : "禁用"
      },
      formatType(row) {
        return row.status === "0" ? "组织" : "部门"
      },
      handleSelectionChange(val) {
        this.multipleSelection = val.map((item) => {return item.id;})
      },
      getSysOrgs() {
        var params = {
          "current": this.currentPage,
          "size": this.pageSize
        };
        // 刷新
        getSysOrgs(params).then((res) => {
          this.tableData = res.data.data;
          this.total = res.data.total;
        })
      },
      editSysOrg(id) {
        this.$store.dispatch("org/editSysOrg", id);
      },
      deleteSysOrg(id) {
        this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteSysOrgById(id).then((res) => {
            Message.success(res.data.msg);
            this.getSysOrgs();
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      },
      handleSizeChange(val) {
        this.pageSize = val;
        this.getSysOrgs();
      },
      handleCurrentChange(val) {
        this.currentPage = val;
        this.getSysOrgs();
      }
    },
    created() {
      if (this.$getButtonAuth("org:page")) {
        this.getSysOrgs();
      }
    }
  }
</script>

<style scoped>

</style>
